Mobile First 思維

Mobile First = 以小螢幕與觸控情境作為預設體驗來設計與實作，然後用**漸進增強(progressive enhancement)**方式，針對較大螢幕與更好的輸入裝置逐步加料。

在 CSS 端，通常表現為：預設樣式給手機，再用 @media (min-width: …) 在較寬視窗上「加強」。

目的

1. 確保核心任務先行：在有限空間與資源下，先把最重要的資訊與操作做好。
2. 提升效能：以較低資源預設（圖小、JS 少、字型精簡）→ 迭代到桌機更容易達標 LCP/CLS/INP。
3. 降低複雜度：UI 結構先「瘦身」，資訊架構更清晰，再視需要豐富。
4. 更廣的到達率：行動裝置使用量大，先保證這群使用者的體驗。

原理與動機

• 限制驅動設計(constraint-driven)：小螢幕迫使使用者聚焦重點、刪除雜訊，避免「把桌機縮小」的災難。
• 網路與硬體差異：行動網路不穩、CPU/GPU 較弱 → 先把「最低可用」做好，逐步增強。
• CSS 維護性：mobile-first 用 min-width 疊加樣式，避免 max-width 疊來疊去互相打架。
• 互動差異：沒有游標懸停(hover)、點擊目標要更大、鍵盤會擋住畫面（虛擬鍵盤）——這些從手機優先思考

在tailwind CSS專案下的應用

Tailwind CSS v4 採用 Mobile First 設計：

• 無前綴：預設為手機樣式
• 斷點前綴：使用 sm: / md: / lg: / xl: / 2xl:，逐步覆蓋到更大的螢幕

預設斷點

@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

自訂斷點：

@theme {
  --breakpoint-mobile: 320px;
  --breakpoint-tablet: 768px;
  --breakpoint-tablet-landscape: 1024px;
  --breakpoint-desktop: 1440px;
  --breakpoint-wide: 1920px;
}

正確的用法：先寫手機，再往上覆蓋

• 不要用 sm: 來寫手機樣式，sm: 代表「從 ≥640px 開始」，而不是「在小螢幕」。

<!-- 手機置中，>=640px 改為靠左 -->
<div class="text-center sm:text-left"></div>
<!-- 導覽列：手機直排；>=md 改為橫排 -->
<nav class="flex flex-col gap-2 md:flex-row md:items-center"></nav>

<!-- 卡片：手機滿版；>=md 有固定側圖 -->
<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow md:max-w-2xl md:flex">
  <img class="h-48 w-full object-cover md:h-full md:w-48" />
  <div class="p-6">...</div>
</div>

結語

今天主要整理了 Mobile First 的概念，順便實驗在 Tailwind CSS 裡的應用方式。
其實核心觀念很簡單：先把手機端做好，再往上加東西。
這樣寫起來比較直覺，程式也乾淨，後續維護起來更省力。